<template>
	<view class="page">
		<view class="info_panel">
			<image :src="bgImg" class="bg" />
			<view class="top">
				<view class="enable">
					<text class="label">可提现余额(元)</text>
					<view class="num">{{ statistics.commission || 0 }}</view>
				</view>
				<view class="record" @click="goWithdrawalRecord" hover-class="hover">
					<text class="text">提现记录</text>
					<uni-icons type="right" size="14" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="bottom">
				<view class="item">
					<view class="content">
						<text class="label">待收益(元)</text>
						<view class="num">{{ statistics.not_order_commission || 0 }}</view>
					</view>
				</view>
				<view class="item">
					<view class="content">
						<text class="label">总收益(元)</text>
						<view class="num">{{ statistics.ls_commission || 0 }}</view>
					</view>
				</view>
				<view @click="transformation" class="item" hover-class="hover">
					<view class="content">
						<text class="label">冻结中(元)</text>
						<text style="margin-left: 5px;">
							<uni-icons type="loop" size="16" color="#fff"></uni-icons>
						</text>
						<view class="num">{{ statistics.frozen_commission || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
		<list reqUrl="/api/commlog?integral_type=1" ref="listInstance" :immediatecheck="false" emptyText="暂无明细">
			<template v-slot="{ list }">
				<view class="detailed">
					<view class="head">
						<view class="line"></view>
						<view class="title">明细</view>
					</view>

					<view v-for="item in list" :key="item.ccl_id" class="item">
						<view class="top">
							<text>{{ item.bd_type_name }}</text>
							<text class="num">
								{{Number(item.bd_total)>0?'+'+item.bd_total:item.bd_total}}
							</text>
						</view>
						<view v-if="item.order_no" class="des">收益订单：{{ item.order_no }}</view>
						<view v-if="item.code" class="des">
							流水号：{{ item.code }}
						</view>
						<view v-if="item.create_at" class="des">时间：{{ item.create_at }}</view>
						<view v-if="item.info" class="des">备注：{{ item.info }}</view>
					</view>
				</view>
			</template>
		</list>
	</view>
	<fixed-bar>
		<view class="fixedButtonWrap">
			<u-button shape="circle" :color="primaryColor" type="primary" text="提现" @click="toWithdrawal"></u-button>
			<view class="gap"></view>
			<u-button shape="circle" :color="primaryColor" type="primary" text="佣金转赠"
				@click="toCommissionTransfer"></u-button>
		</view>
	</fixed-bar>
	<!--选择提现方式选择弹出层-->
	<uni-popup ref="withdrawalMethosdPopupInstance" type="bottom" :safe-area="false">
		<view class="choose_withdrawal_methods">
			<view class="closeable" hover-class="hover" @click="showPopup(false)">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<view class="title">请选择提现方式</view>
			<view v-for="item in withdrawalInfo.txType" :key="item" @click="onWithdrawalMethodSelect(['',0,1][item])"
				class="item" hover-class="tapstate">
				<image :src="['','/static/image/wechat.png','/static/image/bank.png'][item]" class="icon"></image>
				<view>{{['','提现到微信','提现到银行卡'][item]}}</view>
			</view>
			<view class="brace"></view>
			<view class="cancel" @click="showPopup(false)" hover-class="tapstate">取消</view>
			<view class="env"></view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, nextTick, computed } from 'vue';
	import request from '@/utils/common/request/index';
	import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { sleep } from '@/utils/common/index';
	import { useGetThemColor } from '@/hooks/useGetThemColor';
	import { useGlobalNetworkImageStore } from '@/store/modules/useGlobalNetworkImage.js';


	const { imgHost } = getApp().globalData;
	const { primaryColor } = useGetThemColor();
	const listInstance = ref(null);
	onShow(() => {
		nextTick(async () => {
			// #ifdef H5
			await sleep(10);
			// #endif
			getDetail();
			listInstance.value.resetRequest();
		})
	})

	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([getDetail(), listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});

	const globalNetworkImageStore = useGlobalNetworkImageStore();
	const bgImg = computed(() => {
		return imgHost + globalNetworkImageStore.value.MoneyTopImg;
	})

	// * 获取明细
	const getDetail = () => {
		return request({
			url: '/api/myservice'
		}).then(res => {
			statistics.value = res;
		});
	};
	let statistics = ref({});

	// * 提现
	const withdrawalInfo = ref(null);
	const toWithdrawal = () => {
		request({
			url: '/api/ytx',
			loadingTip: "加载中",
		}).then(res => {
			withdrawalInfo.value = res;
			if (Number(res.commission) === 0) return uni.showToast({
				title: '可提现金额不足',
				icon: "none"
			})
			showPopup(true);
		});
	}
	const withdrawalMethosdPopupInstance = ref(null);
	const onWithdrawalMethodSelect = (type) => {
		showPopup(false);
		uni.navigateTo({
			url: `/pages/withdrawal/withdrawal?type=${type}&ktx=${statistics.value.commission}`
		})
	}
	const showPopup = (flag) => {
		flag ? withdrawalMethosdPopupInstance.value.open() : withdrawalMethosdPopupInstance.value.close();
	};

	const goWithdrawalRecord = () => {
		uni.navigateTo({
			url: "/pages/withdrawal-record/withdrawal-record"
		})
	}

	// * 冻结金额转提现金额
	const transformation = () => {
		uni.showModal({
			title: '提示',
			content: '您确定将冻结佣金转换为提现佣金吗？',
			confirmColor: primaryColor.value,
			success(res) {
				if (res.cancel) return;
				request({
					url: '/api/frozenczc'
				}).then(async () => {
					uni.showToast({
						title: '转换成功',
						icon: 'success',
						mask: true
					})
					await sleep();
					getDetail();
				})
			}
		})
	};

	const toCommissionTransfer = () => {
		uni.navigateTo({
			url: "/pages/commission-transfer/commission-transfer"
		})
	}
</script>

<style lang="scss" scoped>
	.info_panel {
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 1;
		padding: 18px;
		border-radius: 10px;
		color: #fff;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.enable {
				.label {
					font-size: 15px;
					font-weight: 500;
				}

				.num {
					margin-top: 8px;
					font-size: 22px;
					font-weight: bold;
				}
			}

			.record {
				display: flex;
				align-items: center;
				padding: 5px 7px;
				border-radius: 40px;
				border: 1px solid #fff;

				.text {
					margin-right: 2px;
					font-size: 12px;
				}
			}

		}

		.bottom {
			margin-top: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;

				.content {
					text-align: center;

					.num {
						margin-top: 5px;
						font-size: 16px;
					}
				}
			}
		}
	}

	.detailed {
		margin-top: 10px;
		padding: 14px 14px 10px;
		border-radius: 10px;
		background-color: #fff;

		.head {
			display: flex;
			align-items: center;
			padding-bottom: 5px;

			.line {
				height: 16px;
				width: 2px;
				background-color: v-bind(primaryColor);
			}

			.title {
				padding-left: 5px;
				font-size: 16px;
				font-weight: bold;
				color: #343440;
			}
		}

		.item {
			padding: 12px 0;

			&+.item {
				border-top: 1px solid #f5f5f5;
			}

			.top {
				display: flex;
				justify-content: space-between;
				padding-bottom: 2px;

				.num {
					font-weight: bold;
				}
			}

			.des {
				margin-top: 5px;
				font-size: 12px;
				color: #a5a6ab;
			}
		}
	}

	.fixedButtonWrap {
		display: flex;

		.gap {
			width: 28rpx;
		}
	}

	.choose_withdrawal_methods {
		position: relative;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
		text-align: center;

		.closeable {
			position: absolute;
			right: 14px;
			top: 10px;
		}

		.title {
			padding-top: 12px;
			padding-bottom: 20px;
			font-size: 16px;
			font-weight: bold;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 18px 0;
			border-bottom: 1px solid #f5f5f5;

			.icon {
				margin-right: 10px;
				width: 18px;
				height: 18px;
			}
		}

		.brace {
			height: 8px;
			background-color: #f5f5f5;
		}

		.cancel {
			padding: 20px 0;
			color: #666;
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>